import React, { Component, PropTypes } from 'react';
import Option from './Option'
import SelectBox from './SelectBox'

class FormElement extends Component {

  static propTtypes = {
    config: React.PropTypes.object.isRequired,
    value: React.PropTypes.any
  }

  getFormElementByType () {
    let type = this.props.config.type

    let Element = <input type="text" name={this.props.config.name} className="form-control" defaultValue={this.props.value} />

    if (type && 'text' !== type) {
      switch (this.props.config.type) {
        case 'boolean': // radio button
          Element = <Option type="radio" config={this.props.config} value={this.props.value} />
          break
        case 'option': // checkbox
          Element = <Option type="checkbox" config={this.props.config} value={this.props.value} />
          break
        case 'select':
          Element = <SelectBox config={this.props.config} value={this.props.value} />
          break
      }
    }

    return Element
  }

  render () {

    let helpText = this.props.config.helpText

    return (
      <div className="form-group">
        <label className="control-label col-sm-4">{this.props.config.title}</label>
        <div className="col-sm-6">
          {this.getFormElementByType()}
          {helpText && <span className="help-block">{helpText}</span>}
        </div>
      </div>)
    return 
  }

}

export default FormElement

